<template>
<div class="cmt-container">
    <h3>评论子组件</h3>
    <textarea  v-model="content" cols="30" rows="10" placeholder="请输入评论的内容……(不超过120字)" maxlength="120"></textarea>
    <mt-button type="primary" size="large"  @click="addComment">发表评论</mt-button>
    <div class="cmt-list">
        <div class="cmt-item">
            <div class="cmt-title">
                <span>第1楼</span>  
                <span>用户:匿名用户</span> 
                <span>发表时间:古时候</span> 
            </div>
            <div class="cmt-body">
                <p>天王盖地虎，楼下接</p>
            </div>
        </div>
        <div class="cmt-item">
            <div class="cmt-title">
                <span>第2楼</span>  
                <span>用户:匿名用户</span> 
                <span>发表时间:</span> 
            </div>
            <div class="cmt-body">
                <p>小鸡炖蘑菇</p>
            </div>
        </div>
        <div class="cmt-item">
            <div class="cmt-title">
                <span>第3楼</span>  
                <span>用户:匿名用户</span> 
                <span>发表时间:</span> 
            </div>
            <div class="cmt-body">
                <p>春风吹杨柳</p>
            </div>
        </div>
        <div class="cmt-item">
            <div class="cmt-title">
                <span>第4楼</span>  
                <span>用户:匿名用户</span> 
                <span>发表时间:</span> 
            </div>
            <div class="cmt-body">
                <p>敢问是段友</p>
            </div>
        </div>
        <div v-if="flag" v-for="item in comment" :key="item.id" class="cmt-item">
            <div class="cmt-title">
                <span>第{{item.floor}}楼</span>  
                <span>用户:{{item.user}}</span> 
                <span>发表时间:{{item.date | dataFormat}}</span> 
            </div>
            <div class="cmt-body">
                <p>{{item.content}}</p>
            </div>
        </div>
    </div>
    <mt-button type="primary" size="large" plain @click="flag = !flag;msg = msg == '加载更多……'?'收起评论':'加载更多……'">{{ msg }}</mt-button>
</div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
    data(){
        return {
            pageIndex: 5,
            comment:[],
            flag:false,
            content:'',
            msg:'加载更多……'
        }
    },
    created(){
        this.getCommentsList()
    },
    methods:{
        getCommentsList(){
            // this.comment.push({id:0,floor:5,user:'知名网友',date:Date.now(),content:'这是测试数据，没有数据接口'})
            this.comment = JSON.parse(localStorage.getItem('pinglun') || '[]')
        },
        addComment(){
            if(this.content){
                var pinglun = JSON.parse(localStorage.getItem('pinglun') || '[]')
                pinglun.push({id:new Date().getTime(),floor:++this.pageIndex,user:'陈超',date:Date.now(),content:this.content})
                localStorage.setItem('pinglun',JSON.stringify(pinglun))
                // var com = localStorage.getItem('pinglun')
                // this.comment.push({id:1,floor:6,user:'陈超',date:Date.now(),content:this.content})
                this.content = ''
                this.getCommentsList()
            }else{
                Toast('内容不能为空')
            }   
        }
    },
    props:['id']
}
</script>

<style lang="less" scoped>
.cmt-container{
    h3{
        font-size: 18px;
    }
    textarea{
        font-size: 12px;
        height: 80px;
        margin: 0 5px;
    }
    .cmt-list{
        padding: 5px 0;
        .cmt-item{
            .cmt-title{
                line-height: 30px;
                background-color: #ccc;
                color: #302727;
                font-size: 12px;
            }
            p{
                line-height: 35px;
                text-indent: 2em;
                color:black;
            }
        }
    }
}
</style>